<!-- 能源系数 -->
<template>
  <div class="scoal-ecarbon-wrap">
    <div class="btn-wrap">
      <px-button v-has="'ALL_ENERGY_BASE_DATA_ADD'" type="primary" @click="handleAdd">新增</px-button>
    </div>
    <div v-loading="tableLoading" class="table-content">
      <px-table height="calc(100vh - 300px)" :data="tableData" size="small" border class="common-table">
        <px-table-column type="index" label="序号" fixed width="55" align="center" />
        <px-table-column prop="name" label="能源" min-width="120" show-overflow-tooltip />
        <px-table-column prop="scoal" label="折标煤系数" min-width="120" show-overflow-tooltip />
        <px-table-column prop="scoalUnit" label="折标煤单位" min-width="120" show-overflow-tooltip />
        <px-table-column prop="ecarbon" label="碳排放因子系数" min-width="120" show-overflow-tooltip />
        <px-table-column prop="ecarbonUnit" label="碳排放因子单位" min-width="120" show-overflow-tooltip />
        <px-table-column label="操作" width="150" fixed="right" align="center">
          <template #default="scope">
            <px-tooltip content="编辑" placement="top">
              <px-button v-has="'ALL_ENERGY_BASE_DATA_EDIT'" link icon="Edit" type="primary" @click="handleEdit(scope.row)" />
            </px-tooltip>
            <px-tooltip content="删除" placement="top">
              <px-button v-has="'ALL_ENERGY_BASE_DATA_DELETE'" link icon="Delete" type="danger" @click="handleDelete(scope.row)" />
            </px-tooltip>
          </template>
        </px-table-column>
      </px-table>
    </div>
    <!-- 新增 -->
    <px-dialog v-model="addDialogVisible" title="新增" width="400">
      <px-form ref="editFormRef" :model="addFormParams">
        <px-form-item label="能源" prop="name" label-width="120">
          <!-- <px-input v-model="addFormParams.name" placeholder="请输入" clearable /> -->
          <px-select v-model="addFormParams.code" placeholder="能源" clearable>
            <px-option v-for="item in typeList" :key="item.itemValue" :label="item.itemName" :value="item.itemValue" />
          </px-select>
        </px-form-item>
        <px-form-item label="折标煤系数" prop="scoal" label-width="120">
          <!-- <px-input v-model="addFormParams.scoal" placeholder="请输入" clearable /> -->
          <px-input-number
            v-model="addFormParams.scoal"
            :precision="10"
            placeholder="请输入数字"
            clearable
            style="width: 100%"
            maxlength="20"
            @input="value => handleInput(value, 'scoal', 'addFormParams')"
          />
        </px-form-item>
        <px-form-item label="折标煤系数单位" prop="scoalUnit" label-width="120">
          <px-input v-model="addFormParams.scoalUnit" maxlength="50" placeholder="请输入" clearable />
        </px-form-item>
        <px-form-item label="碳排放因子系数" prop="ecarbon" label-width="120">
          <!-- <px-input v-model="addFormParams.ecarbon" placeholder="请输入" clearable /> -->
          <px-input-number
            v-model="addFormParams.ecarbon"
            :precision="10"
            placeholder="请输入数字"
            clearable
            style="width: 100%"
            maxlength="20"
            @input="value => handleInput(value, 'ecarbon', 'addFormParams')"
          />
        </px-form-item>
        <px-form-item label="碳排放因子单位" prop="ecarbonUnit" label-width="120">
          <px-input v-model="addFormParams.ecarbonUnit" maxlength="50" placeholder="请输入" clearable />
        </px-form-item>
      </px-form>
      <template #footer>
        <span class="dialog-footer">
          <px-button @click="cancelBtn('add')">取消</px-button>
          <px-button type="primary" @click="saveBtn('add')">确定</px-button>
        </span>
      </template>
    </px-dialog>
    <!-- 编辑 -->
    <px-dialog v-model="editDialogVisible" title="编辑" width="1000">
      <px-form ref="editFormRef" :model="editFormParams">
        <px-form-item label="能源" prop="code" label-width="120">
          <!-- <px-input v-model="editFormParams.pressure" placeholder="请输入" clearable /> -->
          <px-select v-model="editFormParams.code" placeholder="能源" clearable>
            <px-option v-for="item in typeList" :key="item.itemValue" :label="item.itemName" :value="item.itemValue" />
          </px-select>
        </px-form-item>
        <px-form-item label="折标煤系数" prop="scoal" label-width="120">
          <!-- <px-input v-model="editFormParams.scoal" placeholder="请输入" clearable /> -->
          <px-input-number
            v-model="editFormParams.scoal"
            :precision="10"
            placeholder="请输入数字"
            clearable
            style="width: 100%"
            maxlength="20"
            @input="value => handleInput(value, 'scoal', 'editFormParams')"
          />
        </px-form-item>
        <px-form-item label="折标煤系数单位" prop="scoalUnit" label-width="120">
          <px-input v-model="editFormParams.scoalUnit" placeholder="请输入" clearable />
        </px-form-item>
        <px-form-item label="碳排放因子系数" prop="ecarbon" label-width="120">
          <!-- <px-input v-model="editFormParams.ecarbon" placeholder="请输入" clearable /> -->
          <px-input-number
            v-model="editFormParams.ecarbon"
            :precision="10"
            placeholder="请输入数字"
            clearable
            maxlength="50"
            style="width: 100%"
            @input="value => handleInput(value, 'ecarbon', 'editFormParams')"
          />
        </px-form-item>
        <px-form-item label="碳排放因子单位" prop="ecarbonUnit" label-width="120">
          <px-input v-model="editFormParams.ecarbonUnit" placeholder="请输入" clearable />
        </px-form-item>
      </px-form>
      <px-table height="200px" :data="historyTable" size="small" border class="common-table">
        <px-table-column type="index" label="序号" fixed width="55" align="center" />
        <px-table-column prop="name" label="能源" min-width="80" show-overflow-tooltip />
        <px-table-column prop="scoal" label="折标煤系数" min-width="120" show-overflow-tooltip />
        <px-table-column prop="scoalUnit" label="折标煤系数单位" min-width="100" show-overflow-tooltip />
        <px-table-column prop="ecarbon" label="碳排放因子系数" min-width="120" show-overflow-tooltip />
        <px-table-column prop="ecarbonUnit" label="碳排放因子单位" min-width="100" show-overflow-tooltip />
        <px-table-column prop="updateTime" label="更新时间" min-width="120" show-overflow-tooltip />
        <px-table-column prop="updateByName" label="更新人" min-width="120" show-overflow-tooltip />
      </px-table>
      <template #footer>
        <span class="dialog-footer">
          <px-button @click="cancelBtn('edit')">取消</px-button>
          <px-button type="primary" @click="saveBtn('edit')">确定</px-button>
        </span>
      </template>
    </px-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, toRefs, onMounted } from "vue";
import { PxMessage, PxMessageBox } from "px-ui";
import {
  getListScoalEcarbonAPI,
  delScoalEcarbonAPI,
  updateScoalEcarbonAPI,
  viewScoalEcarbonAPI,
  queryChildByTypeCodeAndItemValue
} from "@/api/energy/baseData";
import { isValidObjectStrict } from "../utils.js";

const state = reactive({
  tableLoading: false,
  tableData: [],
  addDialogVisible: false,
  addFormParams: {
    name: "", // 能源类型名称
    code: "", // 能源类型编码
    scoal: 1, // 折标煤系数
    scoalUnit: "", //折标煤系数单位
    ecarbon: 1, // 碳排放因子系数
    ecarbonUnit: "" //碳排放因子单位
  },
  editDialogVisible: false,
  editFormParams: {
    name: "", // 能源类型名称
    code: "", // 能源类型编码
    scoal: 1, // 折标煤系数
    scoalUnit: "", //折标煤系数单位
    ecarbon: 1, // 碳排放因子系数
    ecarbonUnit: "" //碳排放因子单位
  },
  historyTable: [],
  typeList: []
});
const { tableLoading, tableData, addDialogVisible, addFormParams, editDialogVisible, editFormParams, historyTable, typeList } = toRefs(state);
const editFormRef = ref();
const addFormRef = ref();

onMounted(() => {
  getData();
  dictData();
});
const getData = async () => {
  try {
    state.tableLoading = true;
    let params = {};
    const res = await getListScoalEcarbonAPI(params);
    if (res?.length) {
      state.tableData = res;
    } else {
      state.tableData = [];
    }
  } catch (error) {
  } finally {
    state.tableLoading = false;
  }
};
const editData = async val => {
  try {
    let res = null;
    let params = {};
    params = val === "add" ? state.addFormParams : state.editFormParams;
    const selectOption = state.typeList.find(item => item.itemValue === params?.code);
    params.name = selectOption?.itemName || ""; // 通过code找到name，进行传参
    if (val === "add" && isValidObjectStrict(params)) {
      res = await updateScoalEcarbonAPI(params);
      PxMessage.success("添加成功");
      state.addFormParams = {
        name: "", // 能源类型名称
        code: "", // 能源类型编码
        scoal: "", // 折标煤系数
        scoalUnit: "", //折标煤系数单位
        ecarbon: "", // 碳排放因子系数
        ecarbonUnit: "" //碳排放因子单位
      };
    } else {
      res = await updateScoalEcarbonAPI(params);
      PxMessage.success("编辑成功");
    }
    getData();
  } catch (error) {}
};
const delData = async val => {
  try {
    let params = {
      id: val?.id || ""
    };
    const res = await delScoalEcarbonAPI(params);
    if (!res) {
      PxMessage.success("删除成功");
    }
    getData();
  } catch (error) {}
};
const viewData = async val => {
  try {
    let params = {
      id: val?.id || ""
    };
    const res = await viewScoalEcarbonAPI(params);
    state.editFormParams = res?.detail;
    state.historyTable = res?.history || [];
  } catch (error) {}
};
const dictData = async () => {
  try {
    let params = {
      typeCode: "ENERGY_MATERIAL_CODE"
    };
    const res = await queryChildByTypeCodeAndItemValue(params);
    if (res?.length) {
      state.typeList = res;
    } else {
      state.typeList = [];
    }
  } catch (error) {}
};
const handleAdd = () => {
  state.addDialogVisible = true;
};
const handleEdit = val => {
  state.editDialogVisible = true;
  viewData(val);
};
const handleDelete = val => {
  PxMessageBox.confirm("是否确认删除？", "温馨提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
    draggable: true
  })
    .then(() => {
      delData(val);
    })
    .catch(() => {});
};
const cancelBtn = val => {
  if (val === "add") {
    state.addDialogVisible = false;
    state.addFormParams = {
      name: "", // 能源类型名称
      code: "", // 能源类型编码
      scoal: 1, // 折标煤系数
      scoalUnit: "", //折标煤系数单位
      ecarbon: 1, // 碳排放因子系数
      ecarbonUnit: "" //碳排放因子单位
    };
  }
  if (val === "edit") {
    state.editDialogVisible = false;
    state.editFormParams = {
      name: "", // 能源类型名称
      code: "", // 能源类型编码
      scoal: 1, // 折标煤系数
      scoalUnit: "", //折标煤系数单位
      ecarbon: 1, // 碳排放因子系数
      ecarbonUnit: "" //碳排放因子单位
    };
  }
};
const saveBtn = val => {
  if (val === "add") {
    state.addDialogVisible = false;
  }
  if (val === "edit") {
    state.editDialogVisible = false;
  }
  editData(val);
};
const handleInput = (value, n, m) => {
  let strValue = String(value);
  if (strValue.length > 20) {
    strValue = strValue.slice(0, 20);
    state[m][n] = parseFloat(strValue);
  }
};
</script>

<style lang="scss" scoped>
.btn-wrap {
  margin: 10px 0;
  text-align: left;
}
</style>
